import React from 'react';
import Taro, { useDidShow, useRouter } from '@tarojs/taro';
import { connect } from 'react-redux';
import { View, Button, Image, Text, ScrollView } from '@tarojs/components';
import EmptyTip from '@/components/EmptyTip';
import editeImg from '@/images/common/edite.png';
import waringImg from '@/images/common/waring.png';
import utils from '@/utils/index';

import './index.scss';

const Address = ({ dispatch, addrEnableList = [], addrUnableList = [] }) => {
  const router = useRouter();
  const { params = {} } = router;

  useDidShow(() => {
    dispatch({
      type: 'order/getUserAddressWithDistanceCheck',
      payload: { orgId: params.orgId, merchantId: params.merchantId },
    });
  });

  const changeRadio = (address) => {
    if (params.from !== 'mine') {
      dispatch({ type: 'productCar/setDefaultAddress', payload: { ...address } });
      Taro.navigateBack();
    }
  };
  const newAdd = () => {
    dispatch({ type: 'giftCard/adressId', payload: null });
    Taro.navigateTo({ url: '/giftCardSubPack/addAddress/index' });
  };
  const edit = (id) => {
    dispatch({ type: 'giftCard/adressId', payload: id });
    Taro.navigateTo({ url: `/giftCardSubPack/addAddress/index?id=${id.id}` });
  };
  const mallList = (addrList = null) => {
    const children = [];
    if (!addrList) {
      return null;
    }
    const reg = /^(\d{3})\d{4}(\d{4})$/;
    const arr = addrList;
    arr.map((item, index) => {
      children.push(
        <View className="box" key={index}>
          {item.isValid !== '1' && <View className="mask"></View>}
          <View className="left" onClick={() => changeRadio(item)}>
            <View className="addr">{item.address}</View>
            <View className="detail">{item.houseNumber}</View>
            <View className="person">
              <Text className="txt name">{item.contactName}</Text>
              <Text className="txt">{item.mobile.replace(reg, '$1****$2')}</Text>
            </View>
          </View>
          <View className="right">
            <View className="top">
              {item.isDefault === '1' && <View className="default">默认</View>}
            </View>
            <View className="bottom" onClick={() => edit(item)}>
              <Image src={editeImg} className="edit" />
            </View>
          </View>
        </View>,
      );
    });
    return children;
  };
  return (
    <View className="addressWrap">
      <ScrollView
        enableFlex
        scrollY
        style={{
          height: `calc(${['100vh', utils.getSizeByScale(162) + 'px'].join(' - ')})`,
        }}
      >
        {addrEnableList.length == 0 && addrUnableList.length == 0 && (
          <EmptyTip text="您还没有地址，请新增地址~" />
        )}
        {mallList(addrEnableList)}
        {addrUnableList.length > 0 && (
          <View className="tipLine">
            <Image className="tipImg" src={waringImg} />
            <Text className="tipTxt">以下地址超出配送范围</Text>
          </View>
        )}
        {mallList(addrUnableList)}
      </ScrollView>
      <View className="btnBox">
        <Button className="btn customePageBackgroundStyle" onClick={newAdd}>
          新增地址
        </Button>
      </View>
    </View>
  );
};
export default connect(({ giftCard, order }) => ({
  adressId: giftCard.adressId,
  allAddresses: giftCard.allAddresses,
  addrEnableList: order.addrEnableList,
  addrUnableList: order.addrUnableList,
}))(Address);
